<template>
  <div class="add-pet-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <h2>添加宠物</h2>
    </div>

    <!-- 宠物信息卡片 -->
    <div class="pet-card">
      <img src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZG9nfGVufDB8fDB8fHww"
       alt="宠物头像" class="pet-avatar" />
      <div class="card-text">THE PET ID CARD</div>
    </div>

    <!-- 表单区域 -->
    <div class="form-content">
      <!-- 昵称 -->
      <div class="form-item">
        <span class="label">昵称</span>
        <van-field
          v-model="pet.petName"
          placeholder="请输入宠物昵称"
          required
          :border = "false"
          class="field"
        />
      </div>

      <!-- 类型选择 -->
      <div class="form-item">
        <span class="label">类型</span>
        <van-radio-group v-model="pet.petType" class="radio-group">
          <van-radio name="1">狗狗</van-radio>
          <van-radio name="2">猫猫</van-radio>
        </van-radio-group>
      </div>

      <!-- 性别选择 -->
      <div class="form-item">
        <span class="label">性别</span>
        <div 
          class="select-item" 
          @click="showPopup('petGender')"
        >
          {{ petGenderText|| '请选择性别' }}
          <van-icon name="arrow-right" size="16" />
        </div>
      </div>

      <!-- 毛色选择 -->
      <div class="form-item">
        <span class="label">毛色</span>
        <div 
          class="select-item" 
          @click="showPopup('petColor')"
        >
          {{ pet.petColor || '请选择毛色' }}
          <van-icon name="arrow-right" size="16" />
        </div>
      </div>

      <!-- 品种选择 -->
      <div class="form-item">
        <span class="label">品种</span>
        <div 
          class="select-item" 
          @click="showPopup('petBreed')"
        >
          {{ pet.petBreed || '请选择品种' }}
          <van-icon name="arrow-right" size="16" />
        </div>
      </div>

      <!-- 年龄选择 -->
      <div class="form-item">
        <span class="label">年龄</span>
        <div 
          class="select-item" 
          @click="showPopup('petAge')"
        >
          {{ pet.petAge ? pet.petAge + '岁' : '请选择年龄' }}
          <van-icon name="arrow-right" size="16" />
        </div>
      </div>
    </div>

    <!-- 提交按钮 -->
    <van-button 
      block 
      @click="submitForm"
      class="yellow-button"
    >
      提交
    </van-button>

    <!-- 通用弹窗选择器 -->
    <van-popup
      v-model:show="isPopupShow"
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="popup-header">
        <h3>
          {{ 
            currentPopup === 'petGender' ? '选择性别' : 
            currentPopup === 'petColor' ? '选择毛色' :
            currentPopup === 'petBreed' ? '选择品种' : '选择年龄'
          }}
        </h3>
        <van-icon name="close" @click="closePopup" />
      </div>
      
      <div class="popup-content">
        <!-- 性别选项 -->
        <div v-if="currentPopup === 'petGender'" class="option-list">
          <div class="option-item" @click="selectItem('petGender', 1)">公</div>
          <div class="option-item" @click="selectItem('petGender', 2)">母</div>
        </div>
        
        <!-- 毛色选项 -->
        <div v-if="currentPopup === 'petColor'" class="option-list">
          <div class="option-item" @click="selectItem('petColor', '黑色')">黑色</div>
          <div class="option-item" @click="selectItem('petColor', '白色')">白色</div>
          <div class="option-item" @click="selectItem('petColor', '棕色')">棕色</div>
          <div class="option-item" @click="selectItem('petColor', '花色')">花色</div>
        </div>
        
        <!-- 品种选项 -->
        <div v-if="currentPopup === 'petBreed'" class="option-list">
          <div class="option-item" @click="selectItem('petBreed', '金毛')">金毛</div>
          <div class="option-item" @click="selectItem('petBreed', '泰迪')">泰迪</div>
          <div class="option-item" @click="selectItem('petBreed', '柯基')">柯基</div>
          <div class="option-item" @click="selectItem('petBreed', '其他')">其他</div>
        </div>
        
        <!-- 年龄选项 -->
        <div v-if="currentPopup === 'petAge'" class="option-list">
          <div 
            class="option-item" 
            @click="selectItem('petAge', age)"
            v-for="age in 20" 
            :key="age"
          >
            {{ age }}岁
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref ,computed} from 'vue';
import { showToast, Popup, Icon, RadioGroup, Radio, Field, Button } from 'vant';
import { addPet } from '../api/index';import { useRouter } from 'vue-router';
import {useUserInfoStore}  from '../stores/userInfo'


const userInfoStore= useUserInfoStore();

const userId = userInfoStore.userId
const router = useRouter()

// 宠物信息
const pet = ref({
  petName: '',
  petType: 1,
  petGender: null,
  petColor: '',
  petBreed: '',
  petAge: null
});

// 性别显示文本（解决：存储数字1/2，但显示公/母）
const petGenderText = computed(() => {
  if (pet.value.petGender === 1) return '公';
  if (pet.value.petGender === 2) return '母';
  return '';
});

// 当前显示的弹窗
const currentPopup = ref(''); // 可能的值: 'gender', 'color', 'breed', 'age', ''
const isPopupShow = ref(false);

// 返回上一页
const goBack = () => {
  // 实际项目中使用路由返回
   router.push({
    name: 'menu'
  })
};

// 显示弹窗
const showPopup = (type) => {
  currentPopup.value = type;
  isPopupShow.value = true;
};

// 关闭弹窗
const closePopup = () => {
  isPopupShow.value = false;
  currentPopup.value = '';
};

// 选择选项
const selectItem = (type, value) => {
  pet.value[type] = value;
  closePopup();
};

// 提交表单
const submitForm = async () => {
  if (!userId) {
    return showToast('请先登录'); // 未登录时提示
  }
  // 简单验证
  if (!pet.value.petName) {
    return showToast('请输入宠物昵称');
  }
  if (!pet.value.petGender) {
    return showToast('请选择宠物性别');
  }

   // 2. 构建完整参数（包含user_id）
  const petData = {
    ...pet.value,
    userId: userId // 关键：添加当前登录用户的ID
  };
  
  try {
    console.log("111",pet.value);
    await addPet(petData);
    showToast('添加成功');
    router.push({ name: 'menu' }); // 成功后跳转
  } catch (error) {
    showToast('添加失败');
  }
};
</script>

<style scoped>
/* 容器样式 */
.add-pet-container {
  padding: 0;
  background-color: #ffffff;
  min-height: 100vh;
}

/* 顶部标题栏 */
.header {
  display: flex;
  align-items: center;
  background-color: #ffd642;
  padding: 16px;
  position: relative;
}

.header h2 {
  margin: 0 auto;
  font-size: 18px;
  font-weight: bold;
}

/* 宠物信息卡片 */
.pet-card {
  background-color: #ffd642;
  text-align: center;
  padding: 20px 0;
  position: relative;
}

.pet-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-bottom: 10px;
}

.card-text {
  font-size: 16px;
  color: #fff;
  letter-spacing: 2px;
}

/* 表单样式 */
.form-content {
  padding: 16px;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.label {
  width: 80px;
  font-size: 14px;
  color: #333;
}

.field {
  flex: 1;
}

.radio-group {
  flex: 1;
  display: flex;
  gap: 20px;
}

.select-item {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  padding-right: 8px;
}

/* 弹窗样式 */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.popup-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.popup-content {
  height: calc(100% - 58px);
  overflow-y: auto;
}

.option-list {
  padding: 10px 0;
}

.option-item {
  padding: 14px 16px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.option-item:active {
  background-color: #f5f5f5;
}

/* 黄色提交按钮样式 */
.yellow-button {
  margin: 16px;
  background-color: #ffd642 !important;
  color: #000 !important;
  border: none !important;
}

.yellow-button:active {
  background-color: #e6bc30 !important;
}
</style>